<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>{$reply['title']}</title>
    <script type="text/javascript" src="../addons/haoman_dpm/img6/jquery.js"></script>
    <script type="text/javascript" src="../addons/haoman_dpm/img6/semantic.min.js"></script>
    <link rel="stylesheet" href="../addons/haoman_dpm/img/bottom.css?v=331323223" type="text/css">
    <link rel="stylesheet" href="../addons/haoman_dpm/img6/style.css?v=24323" type="text/css">
    <link rel="stylesheet" href="../addons/haoman_dpm/img6/semantic.min.css" type="text/css">
    <script type="text/javascript" src="../addons/haoman_dpm/img/jquery.cookie.js"></script>
    <style type="text/css">
        body{
            background: url({$bg}) center center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
<div id="lanren" style="position: absolute;right: 15px;">
    <div id="audio-btn" class="on" onclick="lanren.changeClass(this,'media')">
    </div>
    </div>
	<div class="chrometips chromeTip" style="display:none;">
            <a href="javascript:void(0);" class="btntips-close" id="chromeTipCloseBtn">×</a>
            <div class="inner-chrometips">
                <p class="chrm-word1">由于你正在使用非Chrome浏览器，大屏幕的体验处于不佳状态，建议您立刻更换浏览器，以获得更好的大屏幕产品用户体验</p>
            </div>
    </div>
    <script>
    $(function() {

        

        var isChrome = navigator.userAgent.indexOf('Chrome') != -1;
        if (!isChrome) {
            $('.chromeTip').show();
        }
        $('#chromeTipCloseBtn').click(function() {
            $('.chromeTip').hide();
        });
        //10s后自动关闭
        setTimeout(function() {
            $('.chromeTip').hide();
        }, 30000);
    });
    </script>
    <div class="container demo-2">
        <div class="content">
            <div id="large-header" class="large-header" style="height: 732px;">
                <canvas id="demo-canvas" width="1440" height="732"></canvas>
            </div>
        </div>
    </div>
    <script src="../addons/haoman_dpm/img6/demo-2.js"></script>
    <div class="main">
	<div class="container1" style="padding-top: 15px;">
		<div class="top">
			
			<div class="center">
				<span class="title" style="font-size: 35px;">{$reply['title']}</span>
			</div>
			<div class="right">
				<span class="tipword messageword ">
					<span id="messageNum" class="num">{$totaldata}</span><br>
					<span class="plus">条消息</span>				
				</span>
				
				<img class="qrcode qrcodeAll" src="{php echo tomedia($reply['up_qrcode'])}">
			</div>
		</div>
	</div>


        <div class="wall">
            <div class="left">
            </div>
            <div class="center">
                <div class="list">
                    <ul id="list" class="ui transition visible">
                        {loop $list $row}
                        <li id="li{$row['id']}" onclick="viewOne({$row['id']},this);" style="display: list-item;">
                            <div class="m1">
                                <div class="m2">
                                    <div class="pic"><img class="circular ui image " src="{if empty($row['avatar'])}../addons/haoman_dpm/img6/avatar.jpg{else}{php echo tomedia($row['avatar'])}{/if}" width="100" height="100">
                                        <!-- <div class="bakico"><img src="img6/ico-weixin.png"></div> -->
                                    </div>
                                    <div class="c f2" style="width:57%"><span>{$row['nickname']}</span><span>：</span>
                                        <word>{$row['word']}</word>
                                    </div>
                                    {if !empty($row['wordimg'])}
                                    <div class="image"><img src="{php echo tomedia($row['wordimg'])}"></div>
                                    {/if}
                                </div>
                            </div>
                        </li>
                        {/loop}

                       
                    </ul>
                </div>
                <div class="footer"></div>
                <!-- <div class="btns">
                    <a href="javascript:void(0);" class="tooltip btnCheckin  btn-icon btn-checkin" title="签到墙，快捷键Q，【空格】开始" id="btnCheckin">签到墙</a><a onclick="viewstyle();" class="tooltip btnSkinSel  btn-icon btn-style" title="更换风格，快捷键F">风格选择</a><a href="http://www.wipadma.com/shake/index.php" class="tooltip btnCheckin  btn-icon btn-shake" target="_blank" title="摇一摇，快捷键Y">摇一摇</a><a href="javascript:void(0);" class="tooltip btnLottery btn-icon btn-lottery " title="抽奖，快捷键C，【空格】开始">抽奖</a><a href="javascript:void(0);" class="tooltip btnVote    btn-icon btn-vote " target="_blank" title="投票，快捷键T">投票</a>
                </div> -->
            </div>
            <div class="right"></div>
        </div>
      
    <div class="mone ui transition hidden" id="mone" onclick="viewOneHide();"><div class="leftside"><div class="part"><div class="pic"><img class="msgconimg" src="../addons/haoman_dpm/img6/avatar.jpg" width="100" height="100"></div><div class="username" style="color:#fff"><span style="color:#fff"></span></div></div></div><div class="rightside"><div class="rightmain"><div class="rconner"></div><span class="msgcon"></span></div></div></div>

       
        <!-- <div id="explan" onclick="viewExplan();" class="ui primary segment transition hidden">
            <div class="ui ribbon green label"><b style="font-size:50px;">上墙关注：</b></div>
            <div class="erweima">
                <center>
                    <div class="mabox">
                        <div class="pic">
                            <center><a class="ui green label"><b style="font-size:2em;line-height: 1.7em;text-transform:lowercase;">微信:weikebaijia</b></a></center><img src="img6/weixin-ma.jpg" width="362px" height="362px;/"></div>
                    </div>
                </center>
            </div>
            <div class="ui bottom right attached label vote-right"><a class="ui black circular label">×</a></div>
        </div> -->
    </div>


     <!--二维码弹层-->

            <div class="fl-layer floatLayer introBox" style="display:none;">
                <div class="fl-inner">
                    <a href="javascript:void(0);" class="flbtn-close showIntroBtn"></a>
                    <p class="notice1">
                    {if empty($reply['qrcodedec'])}
                    使用微信扫描以下任意二维码，发送关键词{$keywords['keywords'][0]['content']}既可以参与活动
                    {else}
                    {$reply['qrcodedec']}
                    {/if}
                    </p>
                    <ul class="img-list">
                        <li class="img-b"><img src="{php echo tomedia($reply['up_qrcode'])}" alt=""></li>
                        <li class="img-d"><img src="{php echo tomedia($reply['up_qrcode'])}" alt=""></li>
                        <li class="img-s"><img src="{php echo tomedia($reply['up_qrcode'])}" alt=""></li>
                    </ul>
                </div>
            </div>
            <!--end 二维码弹层-->

	<div class="bottom" style="width: 100%;">
            <div class="opened">
                <div class="point"><img src="../addons/haoman_dpm/img/opened.png"></div>
                
                <div class="item">
                    <ul>
                        <li title="全屏">
                            <span class="icon screen"></span>
                            <br>
                            <span class="text">全屏</span>
                        </li>
                        <li class="Hidden" title="取消全屏">
                            <span class="icon exit_screen"></span>
                            <br>
                            <span class="text">退出全屏</span>
                        </li>
                        <li title="开幕墙" page="vote">
                            <a href="{php echo $this->createMobileUrl('dpm_index',array('rid'=>$rid))}">
                            <span class="icon vote"></span>
                            <br>
                            <span class="text">开幕墙</span>
                            </a>
                        </li>
                        <li title="显示二维码" page="qrcode">
                            <span class="icon qrcode qrcodeAll"></span>
                            <br>
                            <span class="text">二维码</span>
                        </li>
                        <li title="显示消息墙" page="message">
                            <a href="{php echo $this->createMobileUrl('dpm_messages',array('rid'=>$rid))}">
                            <span class="icon message"></span>
                            <br>
                            <span class="text">消息墙</span>
                            </a>
                        </li>
                      
                        <li title="3D签到墙" page="sign-3d">
                            <a href="{php echo $this->createMobileUrl('dpm_3dqd',array('rid'=>$rid))}">
                            <span class="icon threed_sign"></span>
                            <br>
                            <span class="text">3D签到墙</span>
                            </a>
                        </li>
                        <li title="抽奖" page="reward">
                            <a href="{php echo $this->createMobileUrl('dpm_choujiang',array('rid'=>$rid))}">
                            <span class="icon give"></span>
                            <br>
                            <span class="text">抽奖</span>
                            </a>
                        </li>
                        
                        <!-- <li title="摇一摇" page="shake">
                            <span class="icon shake"></span>
                            <br>
                            <span class="text">摇一摇</span>
                        </li> -->
                        <li title="抢红包" page="hb">
                            <a href="{php echo $this->createMobileUrl('dpm_qianghongbao',array('rid'=>$rid))}">
                            <span class="icon hb"></span>
                            <br>
                            <span class="text">抢红包</span>
                            </a>
                        </li>
                        <!-- <li title="摇一摇跑马" page="paoma">
                            <span class="icon paoma"></span>
                            <br>
                            <span class="text">摇一摇跑马</span>
                        </li>
                        <li title="大转盘" page="wheel">
                            <span class="icon wheel"></span>
                            <br>
                            <span class="text">大转盘</span>
                        </li> -->
                        <li class="hideBullet" title="嘉宾" page="bullet">
                            <a href="{php echo $this->createMobileUrl('dpm_jiabing',array('rid'=>$rid))}">
                            <span class="icon bullet"></span>
                            <br>
                            <span class="text">嘉宾</span>
                            </a>
                        </li>
                        <li title="闭幕墙" page="signNew">
                            <a href="{php echo $this->createMobileUrl('dpm_index',array('rid'=>$rid,'themes'=>1))}">
                            <span class="icon sign"></span>
                            <br>
                            <span class="text">闭幕墙</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="closed Hidden">
                <div class="point"><img src="../addons/haoman_dpm/img/chosed.png"></div>
            </div>
        </div>

<audio src="{$music}" preload="auto" id="media" autoplay="autoplay" loop="loop"></audio>
<script>
var lanren = {
    changeClass: function (target,id) {
        var className = $(target).attr('class');
        var ids = document.getElementById(id);
        (className == 'on')
            ? $(target).removeClass('on').addClass('off')
            : $(target).removeClass('off').addClass('on');
        (className == 'on')
            ? ids.pause()
            : ids.play();
    },
    play:function(){
        document.getElementById('media').play();
    }
}
lanren.play();

</script>

    <script type="text/javascript">
    setInterval(function(){
        $.ajax({
            url:"{php echo $this->createMobileUrl('haishen', array('rid' => $rid,'gets'=>'message','isckmessage'=>$isckmessage))}",
            dataType:'json',
            success:function(data){

                var code = data['code'];
                var shenyu = data['shenyu'];
                $('#messageNum').html(shenyu);
                // console.log(shenyu);
            }
        })
    },4000);


    var refreshtime = 3;
    var len = 0;
    var cur = 0; //当前位置
    var o_cur = 0; //当前位置
    var mtime;
    var mesdata = new Array();
    var lastid = 1;
    var rootimg = "{$_W['attachurl']}";

    function viewOneHide() {
        oopen = switchto(oopen, 'mone');
    }

    function viewOne(cid, t) {
        var str = $('#li' + cid);
        var onenickname = str.find("span").html();
        var oneword = str.find("word").text();
        var onesrc = str.find("img").attr('src');
        var oneimgsrc = str.find(".image").find("img").attr('src');
        if (typeof(oneimgsrc) == 'string') {
            $("#mone").find(".msgcon").html('<img src="' + oneimgsrc + '"/>');
        } else {
            $("#mone").find(".msgcon").text(oneword);
        }
        $("#mone").find("span").first().html(onenickname);
        $("#mone").find("img").first().attr('src', onesrc);
        oopen = switchto(oopen, 'mone');
    }

    // function viewExplan() {

    //     $("#explan").transition('fade up');
    // }

    function viewstyle() {
        $("#style").transition('scale');
    }

    function messageAdd() {
        if (cur == len) {

// console.log($("#list li").length);
// if($("#list li").length > 0){
//     o_cur = cur;
    cur = 0;
// }
            messageData();
            return false;
        }
        if (mesdata[cur]) {
            // console.log(cur);
            // console.log(len+"|"+cur);
        	// alert(cur);
        	
            if (mesdata[cur][4] == '') {
                var avatar = mesdata[cur][1];
                if(avatar == ''){
                    avatar = "../addons/haoman_dpm/img6/avatar.jpg";
                }
                var userName = mesdata[cur][2];
                // var userName = "";
                var str = '<li id=li' + cur + ' onclick="viewOne(' + cur + ',this);"><div class=m1><div class="m2"><div class="pic"><img class="circular ui image " src="' + avatar + '" width="100" height="100" /></div><div class="c f2"><span>' + userName + '</span><span>：</span><word>' + mesdata[cur][3] + '</word></div></div></div></li>';
            } else {
                var avatar = mesdata[cur][1];
                if(avatar == ''){
                    avatar = "../addons/haoman_dpm/img6/avatar.jpg";
                }
                var userName = mesdata[cur][2];
                // var userName = "";
                //如果是图片
                var str = '<li id=li' + cur + ' onclick="viewOne(' + cur + ',this);"><div class=m1><div class="m2"><div class="pic"><img class="circular ui image" src="' + avatar + '" width="100" height="100" /></div><div class="c f2" style="width:57%"><span>' + userName + '</span><span>：</span><word>' + mesdata[cur][3] + '</word></div><div class="image"><img src="' + rootimg + mesdata[cur][4] + '"/></div></div></div></li>';
            }
        } else {
            console.log("出现data[cur]=null：" + cur);
        }
        if (cur > 50) {
            $("li").remove("#li" + (cur - 50));
        }
        $("#list").prepend(str);
        $("#li" + cur).slideDown(600);
        {if $reply['isopenimg']==1}
        if(mesdata[cur][4] != '') {
            viewOne(cur, cur);
            window.setTimeout('viewOneHide();', 5000);
            // data[cur][4] = null;
        }
        {/if}
        cur++;
        messageData();
    }

    function messageData() {
        // console.log(len);
        var url = '{php echo $this->createMobileUrl('dpm_getmessages',array('rid'=>$rid))}';
        $.post(url, {
            len:len
        }, function(d) {
            d = eval("(" + d + ")"); 
            // alert(d);return;
            // alert(d);
            // console.log(d['data']);

            if (d['ret'] == 1) {
                $.each(d['data'], function(i, v) {
                    mesdata.push(new Array(v['id'], v['avatar'], v['nickname'], v['word'], v['wordimg'], v['fromtype']));
                    lastid = v['id'];

                    // cur = o_cur;
                    // cur = 0;
                    
                    len++;
                });
                if(d['data'].length>0){
                    cur = len - d['data'].length;
                }
                
                console.log(d['data'].length);

            } else {
                //	alert('木有新消息..每5秒ajax一次');
                window.setTimeout('messageData();', refreshtime * 1000);
            }
        });
    }
    window.onload = function() {
        mtime = setInterval(messageAdd, refreshtime * 1000);

    }
 


    var g = $(".bottom .opened");
    var i = $(".bottom .closed");
    $(".bottom .opened .point").click(function() {
        g.addClass("Hidden");
        i.removeClass("Hidden")
    });

    $(".qrcodeAll").click(function() {
        $(".mark-ewm").show();
        $(".introBox").show();
    });
    
    $(".flbtn-close").click(function() {
        $(".mark-ewm").hide();
        $(".introBox").hide();
    });

    _closePoint = function(){
        g.addClass("Hidden");
        i.removeClass("Hidden")
    }

    $(".bottom .closed .point").click(function() {
        g.removeClass("Hidden");
        i.addClass("Hidden")
    });

    $(".bottom .opened .item ul li .icon.screen").click(function() {
        h();
        $(".bottom .opened .item ul li .icon.screen").closest("li").addClass("Hidden");
        $(".bottom .opened .item ul li .icon.exit_screen").closest("li").removeClass("Hidden")
    });
    $(".bottom .opened .item ul li .icon.exit_screen").click(function() {
        b();
        $(".bottom .opened .item ul li .icon.screen").closest("li").removeClass("Hidden");
        $(".bottom .opened .item ul li .icon.exit_screen").closest("li").addClass("Hidden")
    });

    function h() {
        var j = document.documentElement,
            k = j.requestFullScreen || j.webkitRequestFullScreen || j.mozRequestFullScreen || j.msRequestFullScreen,
            l;
        if (typeof k != "undefined" && k) {
            k.call(j);
            return
        }
        if (typeof window.ActiveXObject != "undefined") {
            l = new ActiveXObject("WScript.Shell");
            if (l) {
                l.SendKeys("{F11}")
            }
        }
    }

    function b() {
        var k = document,
            j = k.cancelFullScreen || k.webkitCancelFullScreen || k.mozCancelFullScreen || k.exitFullScreen,
            l;
        if (typeof j != "undefined" && j) {
            j.call(k);
            return
        }
        if (typeof window.ActiveXObject != "undefined") {
            l = new ActiveXObject("WScript.Shell");
            if (l != null) {
                l.SendKeys("{F11}")
            }
        }
    }



    </script>
    <div class="mark-ewm"></div>
</body>
</html>
